<template>
    <div class="fourColorMap ">
        <div style="display: flex;">
                <Aside @handleNodeClick="handleNodeClick" />
            <div style="flex: 1;" class="list_container flex both-100">
                <Breadcrumb :title="pageTitle" />
                <div class="content_container">
                    <div class="search_wrapper flex-space-between el-form--inline">
                        <div class="search flex">
                        </div>
                        <div class="edit" style="mask-type: 10px;margin-bottom: 10px;">
                            <el-button @click="handleAdd()" class="btn_primary el-icon-plus">新增</el-button>
                        </div>

                    </div>
                    <div class="table_container">
                        <el-table :data="treeDataList" stripe class="per_table" style="width: 100%" :height="winTableH">
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column prop="picName" label="名称"></el-table-column>
                            <el-table-column prop="picUrl" label="检查安全风险分级管控图" align="center">
                                <template slot-scope="scope">
                                    <img style="width: 150px; height: 150px;"
                                        :src="$store.state.config.inFilePrefix + scope.row.picUrl" alt="">
                                    <!-- <el-image style="width: 100px; height: 100px" :src="scope.row.picUrl"
                                :preview-src-list="[$store.state.config.inFilePrefix + scope.row.picUrl]">
                            </el-image> -->
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="280">
                                <template slot-scope="scope">
                                    <div>
                                        <!-- <span type="text" class="el-icon-download" style="color:dodgerblue;" size="small"
                                    @click="handleEdit(scope.row)">下载</span> -->
                                        <!-- <a class="el-icon-download" href="图片的路径"
                                            :download="$store.state.config.inFilePrefix + scope.row.picUrl">下载</a> -->
                                        <span type="text" class="marginl-10 tag_primary"
                                            size="small" @click="handleDownLoad(scope.row)">下载</span>
                                        <!-- <span type="text" class="marginl-10 tag_primary"
                                            size="small" @click="handleSelect(scope.row)">详情</span> -->
                                        <span type="text" class="marginl-10 tag_warning" size="small"
                                            @click="handleDelete(scope.row)">删除</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 分页 -->
                    <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum"
                        :limit.sync="searchMap.pageSize" @change="getList"></Pagination>
                </div>
            </div>
        </div>
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body
            :before-close="() => { dialogVisible = false }" :close-on-click-modal="false">
            <el-form ref="form" :model="formModel" size="small" :rules="formRules" label-width="80px"
                :disabled="formDisabledType === 'select'">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="名称" label-width="120px" prop="picName">
                            <el-input v-model="formModel.picName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!-- <el-form-item label="名称" label-width="120px" prop="picUrl">
                            <el-upload class="upload-demo" :before-upload="handleBeforeUpload" drag action="" multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            </el-upload>
                        </el-form-item> -->
                        <el-form-item label="图片" label-width="120px" prop="picUrl">
                            <base-upload :formType="formType" v-model="formModel.picUrl" @change="changeImg"></base-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="formDisabledType === 'select'">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">关 闭</el-button>
            </div>
            <div slot="footer" class="dialog-footer" v-else>
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">取 消</el-button>
                <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="详情" :visible.sync="dialogVisibleInfo" width="800" append-to-body>
            <custom-title title="详细信息" />
            <BaseDescriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="formModel">
                <template #picUrl>
                    <img :src="$store.state.config.inFilePrefix + formModel.picUrl" alt="">
                </template>
            </BaseDescriptions>
        </el-dialog>
    </div>
</template>
<script>
import Aside from '@/components/Aside'
import { EventBus } from '@/utils/eventbus';

import { projectPointPic, projectPointPicList, projectPointPicInfo } from '../api/index'
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';
export default {
    components: { Aside, BaseDescriptions },
    data() {
        return {
            dialogVisibleInfo:false,
            formType: 'basicInformation',
            pageTitle: '场所四色图',
            title: '新增',
            reqType: 'post',
            formDisabledType: 'add',
            dialogVisible: false,
            treeDataList: [],
            searchMap: {
                pageNum: 1,
                pageSize: 10,
                picType: '3',
                projectPointId: '',
                sort: '1'
            },
            descConfig: {
                size: 'medium',
                column: '2',
            },
            total: 1,
            formModel: {
                picType: '3',
                projectPointId: '',
                sort: '1'
            },
            formRules: {
                picName: {
                    required: true,
                    message: "名称不能为空",
                    trigger: "change",
                },
                picUrl: {
                    required: true,
                    message: "图片不能为空",
                    trigger: "change",
                },
            },
            descConfigItem: [
                {
                    fieIdName: 'picName',
                    label: '名称',
                    span: 12,
                },
                {
                    fieIdName: 'picUrl',
                    label: '名称',
                    span: 12,
                    slotName:'picUrl'
                },
            ]
        }
    },
    methods: {
        submitFrom() {
            console.log(this.formModel, '入参')
            this.$refs.form.validate((valid) => {
                if (valid) {
                    projectPointPic(this.formModel, this.reqType).then(res => {
                        if (200 === res.code) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                            });
                            this.dialogVisible = false
                            this.getList()
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        handleAdd() {
            if (this.$refs.form) {
                this.$refs.form.resetFields()
            }
            // this.formModel = {
            //     picType: '3',
            //     sort: '1'
            // }
            this.formDisabledType = 'add'
            this.dialogVisible = true
        },
        // 节点点击触发
        handleNodeClick(treeData) {
            console.log(treeData, '节点触发')
            this.searchMap.projectPointId = treeData.projectPointId
            this.formModel.projectPointId = treeData.projectPointId
            this.getList();
        },
        handleEdit(row) {
            // let $store.state.config.inFilePrefix + row.picUrl

        },
        handleDownLoad(row) {
            console.log('1')
            this.downloadByBlob(this.$store.state.config.inFilePrefix + row.picUrl, 'pic')
        },
        downloadByBlob(url, name) {
            let image = new Image();
            image.setAttribute("crossOrigin", "anonymous");
            image.src = url;
            image.onload = () => {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let ctx = canvas.getContext("2d");
                ctx.drawImage(image, 0, 0, image.width, image.height);
                canvas.toBlob(blob => {
                    let url = URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.download = name;
                    a.href = url;
                    a.click();
                    a.remove();
                    // 用完释放URL对象
                    URL.revokeObjectURL(url);
                });
            };
        },
        handleSelect(row) {
            this.dialogVisibleInfo = true
            this.formDisabledType = 'select'
            // this.formModel.picName = row.picName
            this.formModel = row
        },

        handleDelete(row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                projectPointPic([row.projectPointPicId], 'delete').then(res => {
                    if (200 === res.code) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async getList() {
            const { code, rows, total } = await projectPointPicList(this.searchMap)
            this.treeDataList = rows
        },
        handleBeforeUpload(file) {
            console.log(file)
        },
        changeImg(item) {
            console.log(item, '项目点图片修改')
            this.formModel.picUrl = item
        },
    },
    mounted() {
        EventBus.$on('currentTree', treeData => {
            console.log('Received tree data:', treeData);
            this.searchMap.projectPointId = treeData.projectPointId
            this.formModel.projectPointId = treeData.projectPointId
            // 处理接收到的数据
            this.getList()

        });
    },
}
</script>
<style lang="less">
.el-upload-dragger {
    width: 400px;
    height: 200px;
}

.el-upload-dragger .el-icon-upload {
    font-size: 60px;
}
</style>
